<template>
	<view class="container">
		<view class="map-content">
			<view class="map">
				<map
					id="myMap"
					:latitude="locationLatitude"
					:longitude="locationLongitude"
					:scale="16"
					:markers="markers"
					:circles="circles"
					:polygons="polygons"
					@tap="setNewMarker"
					:show-location="true"
					enable-rotate
				></map>
			</view>
			<cover-view class="cover-view-container" :style="'bottom: ' + (type == 1 ? '580rpx' : '470rpx') + ';'">
				<cover-view class="cover-btn" @tap="clearMarkers" v-if="type == 2">清除点位</cover-view>
				<!-- <cover-view class="cover-btn {{markers.length>=3?'blue':''}}" wx:if="{{type==2}}" bindtap="drawShapes">绘制形状</cover-view> -->
				<cover-view class="position" @tap="getLocationPosition">
					<cover-image class="location" :src="locationImg"></cover-image>
				</cover-view>
			</cover-view>
		</view>
		<!-- <view class="set-area" style="bottom: {{keyboardHeight}}px;"> -->
		<view class="set-area">
			<view class="search-place" hover-class="common-btn" @tap="toSeachAddress">
				<image :src="searchImg"></image>
				<view class="ipt">搜索地名</view>
			</view>
			<view class="attendance-area-name">
				<label>考勤区名称：</label>
				<input
					type="text"
					placeholder-class="placeholder-class"
					placeholder="请输入考勤区名称"
					maxlength="30"
					v-model="areaName"
					@input="handleInput"
					:cursor-spacing="nameKeyBoardHeight"
					always-embed
				/>
			</view>
			<view class="attendance-area-shape">
				<label>区域形状：</label>
				<view class="radio-group">
					<u-radio-group v-model="type" @change="changeType" direction="horizontal">
						<u-radio :name="1" shape="square" icon-size="18px" label="圆形"></u-radio>
						<u-radio :name="2" shape="square" icon-size="18px" label="自定义"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="attendance-radius" v-if="type == 1">
				<label>考勤半径(米)：</label>
				<view class="radius">
					<view hover-class="common-btn" @tap="decrease">
						<commonIcon type="icon-jian" :size="64" />
					</view>
					<input
						type="text"
						placeholder="请输入半径"
						placeholder-class="placeholder-class"
						v-model="radius"
						@input="handleInput"
						@blur="handleBlur"
						:cursor-spacing="radiusKeyBoardHeight"
						always-embed
					/>
					<view hover-class="common-btn" @tap="increase">
						<commonIcon type="icon-jia" :size="64" />
					</view>
				</view>
			</view>
			<view class="set-btns">
				<button hover-class="common-btn" @tap="back">返回</button>
				<button hover-class="common-btn" @tap="sure">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import commonIcon from '@/pagesA/components/common/icon/icon';
import { common } from '@/pagesA/utils/common.js';
// import searchImg from '@/pagesA/assets/image/search.png';
// import locationImg from '@/pagesA/assets/image/location.png';
const app = getApp();
export default {
	components: {
		commonIcon
	},
	data() {
		return {
			locationLatitude: 29.558728,
			//当前定位，默认重庆渝中，无授权亦可加载
			locationLongitude: 106.583881,
			//当前定位，默认重庆渝中
			areaLatitude: '',
			//设置定位
			areaLongitude: '',
			//设置定位
			markers: [],
			circles: [],
			areaName: '',
			searchImg: common.imgs.searchImg,
			locationImg: common.imgs.locationImg,
			radius: 100,
			mapCtx: null,
			step: 50,
			nameKeyBoardHeight: 0,
			radiusKeyBoardHeight: 0,
			type: 1,
			polygons: [],
			uuid: '',
			isEdit: false //是否为编辑
		};
	},
	onLoad(options) {
		if (app.globalData.isEditLocationInfo) {
			//编辑，获取详情
			let editLocationInfo = app.globalData.editLocationInfo;
			this.areaName = editLocationInfo.name;
			this.type = editLocationInfo.type;
			this.uuid = editLocationInfo.uuid;
			if (editLocationInfo.type == 2) {
				//自定义
				this.polygons = [
					{
						points: editLocationInfo.content,
						strokeColor: '#FF943D',
						strokeWidth: 2,
						fillColor: '#FF943D33'
					}
				];
				this.markers = [];
				for (let item of editLocationInfo.content) {
					this.markers.push({
						width: '20',
						height: '30',
						id: this.markers.length + 1,
						latitude: item.latitude,
						longitude: item.longitude
					});
				}
				// this.setData({
				// 	areaName: this.areaName,
				// 	type: this.type,
				// 	polygons: this.polygons,
				// 	markers: this.markers,
				// 	locationLatitude: editLocationInfo.content[0].latitude,
				// 	locationLongitude: editLocationInfo.content[0].longitude
				// });
				this.locationLatitude = editLocationInfo.content[0].latitude;
				this.locationLongitude = editLocationInfo.content[0].longitude;
			} else {
				//圆形
				this.radius = editLocationInfo.radius;
				this.areaLatitude = editLocationInfo.content[0].latitude;
				this.areaLongitude = editLocationInfo.content[0].longitude;
				// this.setData({
				// 	uuid: this.uuid,
				// 	areaName: this.areaName,
				// 	type: this.type,
				// 	radius: editLocationInfo.radius,
				// 	locationLatitude: editLocationInfo.content[0].latitude,
				// 	locationLongitude: editLocationInfo.content[0].longitude
				// });
				this.locationLatitude = editLocationInfo.content[0].latitude;
				this.locationLongitude = editLocationInfo.content[0].longitude;
				this.setCircleMarker(editLocationInfo.content[0].latitude, editLocationInfo.content[0].longitude);
			}
			this.isEdit = true;
			delete app.globalData.isEditLocationInfo;
			delete app.globalData.editLocationInfo;
		}
		this.handleKeyBoardHeight();
		this.mapCtx = uni.createMapContext('myMap');
		if (!this.isEdit) {
			//新增
			this.getCurrentPosition();
		}
	},
	onShow() {
		if (app.globalData.hasChooseAddress) {
			//搜索地名
			let chooseAddressInfo = app.globalData.chooseAddressInfo;
			// this.setData({
			// 	locationLatitude: chooseAddressInfo.latitude,
			// 	locationLongitude: chooseAddressInfo.longitude
			// });
			this.locationLatitude = chooseAddressInfo.latitude;
			this.locationLongitude = chooseAddressInfo.longitude;
			delete app.globalData.hasChooseAddress;
			delete app.globalData.chooseAddressInfo;
		}
	},
	methods: {
		handleKeyBoardHeight() {
			uni.getSystemInfo({
				success: (systemInfo) => {
					if (systemInfo.platform == 'ios') {
						// this.setData({
						// 	nameKeyBoardHeight: 50,
						// 	radiusKeyBoardHeight: 35
						// });
						this.nameKeyBoardHeight = 50;
						this.radiusKeyBoardHeight = 35;
					} else {
						// this.setData({
						// 	nameKeyBoardHeight: 10,
						// 	radiusKeyBoardHeight: 0
						// });
						this.nameKeyBoardHeight = 10;
						this.radiusKeyBoardHeight = 0;
					}
				}
			});
		},

		handleInput() {},

		handleBlur() {
			let radius = Number(this.radius);
			if (isNaN(radius)) {
				// this.setData({
				// 	radius: 100
				// });
				this.radius = 100;
				common.message.toast('考勤半径范围只能数字');
				return;
			}
			if (radius >= 1000) {
				// this.setData({
				// 	radius: 1000
				// });
				this.radius = 1000;
				if (radius > 1000) {
					common.message.toast('考勤半径范围只能为50~1000米');
				}
			} else if (radius <= 50) {
				// this.setData({
				// 	radius: 50
				// });
				this.radius = 50;
				if (radius < 50) {
					common.message.toast('考勤半径范围只能为50~1000米');
				}
			} else {
				// this.setData({
				// 	radius
				// });
				this.radius = radius;
			}
			this.setCircleMarker(this.areaLatitude, this.areaLongitude);
		},

		getCurrentPosition(callback, initData = true) {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					// app.globalData.vConsole.log('获取定位成功:', res);
					// this.setData({
					// 	locationLatitude: res.latitude,
					// 	locationLongitude: res.longitude
					// });
					this.locationLatitude = res.latitude;
					this.locationLongitude = res.longitude;
					if (initData) {
						this.areaLatitude = res.latitude;
						this.areaLongitude = res.longitude;
					}
					if (callback) {
						callback(res);
					}
				},
				fail: (err) => {
					// app.globalData.vConsole.log('获取当前定位错误:', err);
					uni.showModal({
						title: '获取定位权限失败',
						content: '获取当前定位失败，请先开启定位授权',
						confirmText: '去设置',
						complete: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (res) => {
										console.log(res);
										// app.globalData.vConsole.log(res);
									}
								});
							}
						}
					});
				}
			});
		},

		setCircleMarker(latitude, longitude) {
			// this.setData({
			// 	markers: [
			// 		{
			// 			width: '20',
			// 			height: '30',
			// 			id: 1,
			// 			latitude: latitude,
			// 			longitude: longitude
			// 		}
			// 	],
			// 	circles: [
			// 		{
			// 			latitude: latitude,
			// 			longitude: longitude,
			// 			color: '#FF943D',
			// 			radius: this.radius,
			// 			fillColor: '#FF943D33',
			// 			strokeWidth: 2
			// 		}
			// 	]
			// });
			this.markers = [
				{
					width: '20',
					height: '30',
					id: 1,
					latitude: latitude,
					longitude: longitude
				}
			];
			this.circles = [
				{
					latitude: latitude,
					longitude: longitude,
					color: '#FF943D',
					radius: this.radius,
					fillColor: '#FF943D33',
					strokeWidth: 2
				}
			];
		},

		setNewMarker(e) {
			this.areaLatitude = e.detail.latitude;
			this.areaLongitude = e.detail.longitude;
			if (this.type == 2) {
				//自定义
				this.setPolygonsMarker(e.detail.latitude, e.detail.longitude);
			} else {
				//圆形
				this.setCircleMarker(e.detail.latitude, e.detail.longitude);
			}
		},

		getLocationPosition() {
			this.getCurrentPosition((res) => {
				this.mapCtx.moveToLocation({
					latitude: res.latitude,
					longitude: res.longitude
				});
			}, false);
		},

		toSeachAddress() {
			uni.navigateTo({
				url: '/pagesA/pages/attendance/areaList/seachAddress/seachAddress'
			});
		},

		decrease() {
			let radius = this.radius - this.step;
			if (radius <= 50) {
				// this.setData({
				// 	radius: 50
				// });
				this.radius = 50;
				if (radius < 50) {
					common.message.toast('考勤半径范围只能为50~1000米');
				}
			} else {
				// this.setData({
				// 	radius
				// });
				this.radius = radius;
			}
			this.setCircleMarker(this.areaLatitude, this.areaLongitude);
		},

		increase() {
			let radius = this.radius + this.step;
			if (radius >= 1000) {
				// this.setData({
				// 	radius: 1000
				// });
				this.radius = 1000;
				if (radius > 1000) {
					common.message.toast('考勤半径范围只能为50~1000米');
				}
			} else {
				// this.setData({
				// 	radius
				// });
				this.radius = radius;
			}
			this.setCircleMarker(this.areaLatitude, this.areaLongitude);
		},

		back() {
			uni.navigateBack();
		},

		sure() {
			if (!this.areaName) {
				common.message.toast('考勤区名称不能为空');
				return;
			}
			if (this.type == 1 && (!this.areaLatitude || !this.areaLongitude)) {
				common.message.toast('请在地图上标记需要考勤的区域');
				return;
			}
			if ((this.type == 2 && this.polygons.length == 0) || (this.type == 2 && this.polygons[0].points.length < 3)) {
				common.message.toast('自定义区域需要在地图上标注不少于3个点');
				return;
			}
			let params = {
				name: this.areaName,
				type: this.type,
				radius: this.radius,
				content: []
			};
			if (params.type == 2) {
				//自定义
				delete params.radius;
				params.content = this.polygons[0].points;
			} else {
				//圆形
				params.content = [
					{
						longitude: this.areaLongitude,
						latitude: this.areaLatitude
					}
				];
			}
			if (this.isEdit) {
				//编辑
				common.apis.mobileAttendance
					.modifyProjectAttendanceConfig({
						...params,
						uuid: this.uuid
					})
					.then((res) => {
						common.message.toast('编辑成功');
						setTimeout(() => {
							this.back();
						}, 1500);
					});
			} else {
				//新增
				common.apis.mobileAttendance.addProjectAttendanceConfig(params).then((res) => {
					common.message.toast('新增成功');
					setTimeout(() => {
						this.back();
					}, 1500);
				});
			}
		},

		changeType(name) {
			//更改区域类型
			// this.setData({
			// 	type: e.detail,
			// 	polygons: [],
			// 	markers: [],
			// 	circles: []
			// });
			this.type = name;
			this.polygons = [];
			this.markers = [];
			this.circles = [];
		},

		clearMarkers() {
			//清除点位
			// this.setData({
			// 	markers: [],
			// 	polygons: []
			// });
			this.polygons = [];
			this.markers = [];
		},

		drawShapes() {
			//绘制形状
		},

		setPolygonsMarker(latitude, longitude) {
			if (this.polygons.length == 0) {
				this.polygons = [
					{
						points: [
							{
								latitude,
								longitude
							}
						],
						strokeColor: '#FF943D',
						strokeWidth: 2,
						fillColor: '#FF943D33'
					}
				];
			} else {
				let points = this.polygons[0].points;
				points.push({
					latitude,
					longitude
				});
				this.polygons[0].points = points;
			}
			this.markers.push({
				width: '20',
				height: '30',
				id: this.markers.length + 1,
				latitude: latitude,
				longitude: longitude
			});
			// this.setData({
			// 	markers: this.markers,
			// 	polygons: this.polygons
			// });
		}
	}
};
</script>
<style>
.container {
	display: flex;
	flex-direction: column;
	/* height: calc(100vh - constant(safe-area-inset-bottom));
  height: calc(100vh - env(safe-area-inset-bottom)); */
	height: 100vh;
}

.map-content {
	flex: 1;
	position: relative;
}

.map-tip-container {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	z-index: 99;
	padding: 25rpx 30rpx;
}

.map-tip {
	display: flex;
	align-items: center;
	height: 64rpx;
	background: #ffffff;
	border-radius: 8rpx;
	padding-left: 16rpx;
}

.map-tip .position-tip {
	width: 32rpx;
	height: 32rpx;
}

.map-tip .tip {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
	margin-left: 10rpx;
	width: 100%;
}

.cover-view-container {
	width: 100%;
	position: absolute;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.cover-btn {
	/* flex: 1; */
	text-align: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	border-radius: 8rpx;
	padding: 20rpx 32rpx;
	background-color: #fff;
	margin-right: 32rpx;
}

.cover-view-container .cover-btn:nth-child(1) {
	width: 200rpx;
}

.cover-view-container .cover-btn:nth-child(2) {
	color: #fff;
	background-color: #999;
}

.cover-view-container .blue {
	background-color: #3f64fa !important;
}

.position {
	margin-left: auto;
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0rpx 0rpx 35rpx 1rpx rgba(0, 0, 0, 0.15);
}

.position .location {
	width: 44rpx;
	height: 44rpx;
}

#myMap {
	width: 100%;
	height: 70vh;
}

.set-area {
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 99;
	bottom: 0;
	left: 0;
	right: 0;
	/* height: 440rpx; */
	background: #ffffff;
	box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.2);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	padding: 32rpx 32rpx calc(32rpx + constant(safe-area-inset-bottom));
	padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
	/* padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); */
}

.search-place {
	display: flex;
	align-items: center;
	height: 72rpx;
	background: #eff1f6;
	border-radius: 8rpx;
	padding: 0 24rpx;
	margin-bottom: 24rpx;
}

.search-place image {
	width: 24rpx;
	height: 24rpx;
	margin-right: 14rpx;
}

.search-place .ipt {
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.attendance-area-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	padding-bottom: 24rpx;
}

.attendance-area-name input {
	text-align: right;
	height: 100%;
}

.attendance-area-shape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40rpx;
}

.attendance-radius {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.attendance-radius .radius {
	flex: 1;
	display: flex;
	align-items: center;
}

.radius input {
	background-color: #f6f7fa;
	text-align: center;
	flex: 1;
	height: 64rpx;
	background: #f6f7fa;
	border-radius: 12rpx;
	margin: 0 16rpx;
}

.set-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.set-btns button {
	flex: 1;
	background-color: #3f64fa;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #ffffff;
	line-height: 40rpx;
	border-radius: 8rpx;
	padding: 20rpx 0;
}

.set-btns button:first-child {
	margin-right: 34rpx;
	background-color: #ebecf2;
	color: #4b5680;
}
</style>
